<template>
	<view>
		<uni-section title="选择留言对象" type="line">
			<view class="uni-ma-4 my-btn">
				<u-button type="primary" size="mini" @click="openDepart()">选择部门</u-button>
			</view>
			<uni-collapse>
				<uni-collapse-item title="人员列表" :show-animation="true" :open="true">
					<view class="uni-container">
						<view class="uni-ma-3">
							<uni-easyinput prefixIcon="search" v-model="searchValue" placeholder="请输入员姓名"
								@iconClick="searchName">
							</uni-easyinput>
						</view>
						<uni-table :loading="loading" border stripe emptyText="暂无更多数据">
							<uni-tr>
								<uni-th align="center">操作</uni-th>
								<uni-th align="center">账号</uni-th>
								<uni-th align="center">姓名</uni-th>
								<uni-th align="center">所属部门</uni-th>
							</uni-tr>
							<uni-tr v-for="(item, index) in tableData" :key="index">
								<uni-td width="150" align="center">
									<view class="my-btn">
										<u-button type="primary" size="mini"
											@click="openLeaveWordsWindow(item.id,item.name)">留言</u-button>
									</view>
								</uni-td>
								<uni-td width="150" align="center">
									<view>
										{{item.account}}
									</view>
								</uni-td>
								<uni-td width="150" align="center">
									<view>
										{{item.name}}
									</view>
								</uni-td>
								<uni-td width="200" align="center">
									<view>
										{{item.departNames}}
									</view>
								</uni-td>
							</uni-tr>
						</uni-table>
						<view class="uni-mb-5 uni-mt-5">
							<uni-pagination :total="total" :pageSize="params.size" prev-text="前一页" next-text="后一页"
								@change="doChangePage" />
						</view>
					</view>
				</uni-collapse-item>
			</uni-collapse>
		</uni-section>
		<view>
			<uni-drawer ref="showRight" mode="right" :mask-click="false">
				<view class="scroll-view">
					<scroll-view class="scroll-view-box" scroll-y="true">
						<view class="uni-ma-3">
							<button type="warn" size="mini" @click="closeDrawer('showRight')">关闭</button>
						</view>
						<view class="info-content">
							<DaTree ref="DaTreeRef" :data="roomTreeData" labelField="name" valueField="id"
								defaultExpandAll showCheckbox @change="handleTreeChange"></DaTree>
						</view>
					</scroll-view>
				</view>
			</uni-drawer>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted
	} from 'vue';
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import http from '@/utils/http.js'
	import DaTree from '@/components/da-tree/index.vue'
	const tableData = ref([]);
	const roomTreeData = ref([]);
	const showRight = ref();
	const params = ref({
		page: 1,
		size: 6
	})
	const total = ref(0);
	const searchValue = ref();
	const loading = ref(false);
	const allsubmitkeys = ref([]);
	const leaveWords = ref();

	onMounted(() => {
		console.log(showRight.value);
	})
	onLoad(() => {
		loading.value = true;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	})
	//以姓名查找
	function searchName() {
		loading.value = true;
		params.value.name = searchValue.value;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}

	function doChangePage(e) {
		loading.value = true;
		params.value.page = e.current;
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}
	//打开留言对话框
	function openLeaveWordsWindow(id, name) {
		console.log(id, name)
		uni.navigateTo({
			url:"/pages/components/words-pad/words-pad?toId="+id+"&toName="+name
		})
	}
	//选择部门
	function openDepart() {
		showRight.value.open();
		http.post("/depart/getAll").then((res) => {
			if (res && res.data && res.data.code == 1) {
				roomTreeData.value = res.data.data;
			}
		}).catch((re) => {
			console.log(re)
		});
	}

	function closeDrawer() {
		loading.value = true;
		showRight.value.close();
		params.value.id = allsubmitkeys.value.join(",")
		http.post("/depart/getUsersEx", params.value).then((res) => {
			if (res && res.data && res.data.code == 1) {
				tableData.value = res.data.rows;
				total.value = res.data.total;
				loading.value = false;
			}
		}).catch((re) => {
			loading.value = false;
		});
	}
	function handleTreeChange(allSelectedKeys, currentItem) {
		allsubmitkeys.value = allSelectedKeys;
		console.log('handleTreeChange ==>', allSelectedKeys)
	}
</script>

<style>
	.scroll-view-box {
		flex: 1;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		background-color: #FFFFFF;
	}
	.my-btn{
		width: 180rpx;
	}
</style>